<template>
  <div>
      <div class="comment-card3" v-if="type!=='dynamic'">
        <div class="comment-card3__l">
          <yun-avatar :userId="info.userId" :src="info.userAvatar"></yun-avatar>
        </div>
        <div class="comment-card3__r">
          <div class="header">
            <h6>{{info.userNick}}</h6>
<!--            <p>{{floor}}楼</p>-->
          </div>
          <p class="comment-box" >{{info.comment}}</p>
          <div class="footer">
            <h6>{{dateConvert2}}</h6>
            <p>
              <!--<span>回复</span>-->
<!--              <span>赞{{likeNum}}</span>-->
              <span @click="dataDeleteComment" v-if="this.info.userId ===$store.state.userProfile.userId">删除</span>

            </p>
          </div>
        </div>

      </div>
      <div class="comment-card3-dynamic" v-if="type==='dynamic'">
        <div class="comment-card3__l">
          <yun-avatar :userId="info.userId" :src="info.userAvatar"></yun-avatar>
        </div>
        <div class="comment-card3__r">
          <div class="header">
            <h6>{{info.userNick}}</h6>
<!--            <p>{{floor}}楼</p>-->
          </div>
          <p class="comment-box" >{{info.comment}}</p>
          <div class="footer">
            <h6>{{dateConvert2}}</h6>
            <p>
              <!--<span>回复</span>-->
<!--              <span>赞{{likeNum}}</span>-->
              <span @click="dataDeleteComment" v-if="this.info.userId ===$store.state.userProfile.userId">删除</span>

            </p>
          </div>
        </div>

      </div>
  </div>

</template>


<script>
  import {dateConvert} from "../../../action/utils/dataConvert";
  import config from '../../../action/config'

  export default {
    name:'commentCard',

    props:{
      info:{
        type:Object,
        default:()=>({})
      },
      id:{
        type:[String,Number],
        default:''
      },
      type:String
    },

    computed:{
      dateConvert2(){
        return dateConvert(this.info.createTime)
      }

    },
    data(){

      //return
      return {
        src:'https://s2.ax1x.com/2020/01/15/lO2kIf.png',
        name:'我我欸',
        floor:6,
        comment:'这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容',
        time:'3小时前',
        likeNum:10,
      }
    },

    methods:{

      dataDeleteComment(){
        if(!this.$store.state.auth.token){
          this.$message({
            type:'warning',
            message:'请在登录后操作!'
          });
          return false;
        }
        let url;
        if(this.type === 'blog'){
          url = config.api.delete.BlogComment.delete+this.info.commentId.toString();
        }
        if(this.type === 'project'){
          url = config.api.delete.ProjectComment.delete+this.info.commentId.toString();
        }
        if(this.type === 'question'){
          url = config.api.delete.QuestionReplyComment.delete+ this.info.commentId.toString();
        }
        if(this.type === 'dynamic'){
          url = config.api.delete.PostComment.delete+this.info.commentId.toString();
        }

        this.$axios.$delete(url).then((response)=>{
          if(response.code===0){
            this.$message({
              type:'success',
              message:'删除成功!'
            });
            this.$emit(config.event.listenCommentReget3,1)

          }else{
            this.$message({
              type:'warning',
              message:'删除失败!'
            });
          }
        })
      }
    }


  }

</script>




<style lang="scss" scoped>

    .comment-card3{
      margin-left:-16*$length;
      box-sizing:content-box;
      padding:10*$length 0 10*$length 16*$length;
      width:714*$length;
      border-bottom:1px dashed #e5e5e5;
      border-left:1px solid #E5E5E5;
      @extend %flex-row-spb;
      align-items: flex-start;

      .comment-card3__l{
        width:48*$length;
      }
      .comment-card3__r{
        width:650*$length;
        .header{
          @extend %flex-row-spb;
          h6{
            @include fontStyle(14,19,500,#666,left)
          }
          p{
            @include fontStyle(12,16,500,#999,left)
          }
        }

        .comment-box{
          margin-top:15*$length;
          @include fontStyle(14,24,500,#333,left);
          height:auto;
        }

        .footer{
          margin:12*$length 0;
          @extend %flex-row-spb;

          h6{
            @include fontStyle(12,16,500,#999,start)
          }
          p{
            @include fontStyle(12,16,500,#999,start);
            span{
              margin-left:20*$length;
              @extend %cursorPointer;
              @extend %animate-transition;
              &:hover{
                color:#00AAE6;
              }

            }
          }
        }
      }
    }
    .comment-card3-dynamic{
      margin-left:-16*$length;
      box-sizing:content-box;
      padding:10*$length 0 10*$length 16*$length;
      width:630*$length;
      border-bottom:1px dashed #e5e5e5;
      border-left:1px solid #E5E5E5;
      @extend %flex-row-spb;
      align-items: flex-start;

      .comment-card3__l{
        width:48*$length;
      }
      .comment-card3__r{
        width:560*$length;
        .header{
          @extend %flex-row-spb;
          h6{
            @include fontStyle(14,19,500,#666,left)
          }
          p{
            @include fontStyle(12,16,500,#999,left)
          }
        }

        .comment-box{
          margin-top:15*$length;
          @include fontStyle(14,24,500,#333,left);
          height:auto;
        }

        .footer{
          margin:12*$length 0;
          @extend %flex-row-spb;

          h6{
            @include fontStyle(12,16,500,#999,start)
          }
          p{
            @include fontStyle(12,16,500,#999,start);
            span{
              margin-left:20*$length;
              @extend %cursorPointer;
              @extend %animate-transition;
              &:hover{
                color:#00AAE6;
              }

            }
          }
        }
      }
    }
    .release-area{
      width:100%;
      padding:14*$length 16*$length;
      background-color: #F4F8FA;
      border:1px solid #EFEFEF;
      border-radius:4*$length;
      @include fontStyle(12,22,500,#666666,left);
      height:66*$length;

    }

    .button-box{
      height:34*$length;
      @extend %flex-row-spb;
      justify-content: flex-end;
      margin-top: 16*$length;
      margin-bottom: 16*$length;
      p{
        width:100*$length;
        background-color: #00AAE6;
        border-radius: 4*$length;
        @include fontStyle(12,34,500,#fff,center);
        @extend %cursorPointer;
        @extend %animate-transition;
        &:hover{
          filter: brightness(110%);
        }


      }

    }

</style>
